<template>
  <!-- #ifdef MP-WEIXIN -->
  <uv-navbar
    :fixed="false"
    :title="title"
    left-arrow
    @leftClick="$onClickLeft"
  />
  <!-- #endif -->
  <view class="p-3">
    <view class="" v-if="list.length > 0">
      <view
        class="card"
        style="backgroundcolor: #6c80ff"
        v-for="(item, i) in list"
        :key="i"
      >
        <view class="flex content-center justify-between">
          <view class="left">
            <view class="top">
              {{ item.bankName }}
            </view>
            <view class="bom">
              {{ currentLanguageTexts.BankCard }}
            </view>
          </view>
          <view class="right" @click="del(item.id)">
            {{ currentLanguageTexts.Unbind }}
          </view>
        </view>
        <view class="num">
          {{ item.bankCode }}
        </view>
      </view>
    </view>
    <view class="" v-else>
      <uv-empty :text="currentLanguageTexts.noData"></uv-empty>
    </view>

    <view
      class="addcard flex content-center"
      @click="gopage('/pages/components/pages/merchant/addCard')"
    >
      <view class="text">
        {{ currentLanguageTexts.add }}
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { getCards, deleteCard } from '@/api/merchant';
import { onLoad } from '@dcloudio/uni-app';
import { useMainStore } from '@/store/store';
import { storeToRefs } from 'pinia';
import { lastfour } from '@/utils/util';
const main = useMainStore();
const { merchartShop, currentLanguageTexts } = storeToRefs(main);
const title = ref(currentLanguageTexts.value.Withdrawal);
const list = ref([]);

onLoad(() => {
  getList();
});

const getList = async () => {
  let res = await getCards({ shopId: merchartShop.value.id });
  if (res) {
    list.value = res;
  }
};

const del = async (id) => {
  uni.showModal({
    title: currentLanguageTexts.value.tip,
    content: currentLanguageTexts.value.ConfirmUnbind,
    confirmText: currentLanguageTexts.value.confirm,
    cancelText: currentLanguageTexts.value.cancel,
    success: async function (res) {
      if (res.confirm) {
        let res1 = await deleteCard({ id: id });
        if (res1) {
          getList();
        }
      } else if (res.cancel) {
      }
    },
  });
};

const gopage = (url) => {
  uni.navigateTo({
    url,
  });
};
</script>

<style lang="scss">
.addcard {
  width: 700rpx;
  height: 100rpx;
  background: #09b4f1;
  border-radius: 20rpx;
  padding: 30rpx 0rpx 44rpx 250rpx;
  box-sizing: border-box;
  position: fixed;
  bottom: 40rpx;
  text-align: center;
  z-index: 999;

  .text {
    font-size: 28rpx;
    color: #ffffff;
    margin-left: 16rpx;
  }
}

.card {
  margin-bottom: 20rpx;
  width: 700rpx;
  height: 258rpx;
  border-radius: 20rpx;
  padding: 40rpx;
  box-sizing: border-box;
  position: relative;
  z-index: 9;

  .num {
    font-size: 46rpx;
    color: #ffffff;
    margin-top: 20rpx;
  }

  .left {
    .top {
      font-size: 32rpx;
      font-weight: 500;
      color: #ffffff;
    }

    .bom {
      font-size: 24rpx;
      color: rgba(255, 255, 255, 0.7);
    }
  }

  .right {
    font-size: 28rpx;
    width: 125rpx;
    height: 50rpx;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 25rpx;
    text-align: center;
    line-height: 50rpx;
    color: #ffffff;
    z-index: 9;
  }
}
</style>
